<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>用户信息管理</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../layui/css/layui.css"  media="all">
</head>
<body>
	<div class="demoTable">
		 搜索编号：
		<div class="layui-inline">
			<input class="layui-input" name="cs1" id="demoReload" autocomplete="off">
		</div>
		<button id="btnSeach" class="layui-btn" data-type="reload">搜索</button>
		<button id="btnAdd" class="layui-btn" data-type="reload">添加</button>
		<button id="btnDelAll" class="layui-btn" data-type="getCheckData">多删</button>
	</div> 
	
	<table class="layui-hide layui-card-body" lay-data="{id: 'idTest'}" lay-filter="test" id="test"></table>
	
	<script type="text/html" id="barDemo">
  		<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
  		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
 		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
	
	<div id="auForm" style="display:none">
		<form class="layui-form" action="" lay-filter="myform">
			
			<div class="layui-form-item">
		    	<label class="layui-form-label">Cs1</label>
		    	<div class="layui-input-block">
		      		<input type="text" name="cs1" lay-verify="title" autocomplete="off" placeholder="请输入Cs1" class="layui-input">
		    	</div>
			</div>
			<div class="layui-form-item">
		   		<label class="layui-form-label">Cs2</label>
		    	<div class="layui-input-block">
		      		<input type="text" name="cs2" lay-verify="title" autocomplete="off" placeholder="请输入Cs2" class="layui-input">
		    	</div>
			</div>
			<div class="layui-form-item">
		    	<label class="layui-form-label">Cs3</label>
		    	<div class="layui-input-block">
		      		<input type="text" name="cs3" lay-verify="title" autocomplete="off" placeholder="请输入Cs3" class="layui-input">
		    	</div>
			</div>
			<div class="layui-form-item">
		    	<div class="layui-input-block">
		      		<button type="submit" class="layui-btn" lay-submit lay-filter="tj">立即提交</button>
		      		<button type="reset" class="layui-btn layui-btn-primary">重置</button>
		    	</div>
			</div>
		</form>
	</div>
	
	<script src="../layui/layui.js" charset="utf-8"></script>
	<script>
		layui.use(['form','table','layer'], function(){
			var table = layui.table;
			var form = layui.form;
			var layer = layui.layer;
		 
			var ktab = table.render({
		    	elem: '#test'
		    	,url:'../csb/showCsb' //showDept - >[{dep}]
		    	,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
	        	,page: true //开启分页
	        	,limits: [5, 10, 15]
	            ,limit: 10 //每页默认显示的数量
	        	,id:'testReload'
		   		,cols: [[ //表头
		   	      {type: 'checkbox', fixed: 'left'}
		   	      ,{field: 'cs1', title: 'Cs1', width:80, sort: true, fixed: 'left', totalRowText: '合计：'}
		   	      ,{field: 'cs2', title: 'Cs2', width: 90, sort: true, totalRow: true}
		   	      ,{field: 'cs3', title: 'Cs3', width: 90, sort: true, totalRow: true}
		   	      ,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
		   	    ]]
		    });
		  
		 	var $ = layui.$, active = {
		    	reload: function(){
		     		var demoReload = $('#demoReload');
		     		//执行重载
		      		table.reload('testReload', {
			        	page: {
			          		curr: 1 //重新从第 1 页开始
			        	}
			        	,where: {
			           		id: demoReload.val()
			        	}
		      		}, 'data');
		    	}
		 	
		  	};

//			$(document).on('click', '#btnAdd', function(){
//
//				var ulayer = layer.open({
//					type: 1
//					,title: '添加信息' //不显示标题栏
//					,closeBtn: true
//					,area: ['400px', '400px']
//					,shade: 0.8
//					,anim: 5
////					,btn: ['添加', '取消']
//					,id: 'LAY_layuipro' //设定一个id，防止重复弹出
//					,btnAlign: 'c'
//					,moveType: 1 //拖拽模式，0或者1
//					,content: $("#auForm").html()
//					,success: function(layero){
//				    	var btn = layero.find('.layui-layer-btn');
//				    	btn.find('.layui-layer-btn0').attr({
//				        	href: 'http://www.layui.com/'
//				        	,target: '_blank'
//				        });
//				    }
//				});
//
//                $("form input[name='cs1']").val(data.cs1);
//                $("form input[name='cs2']").val(data.cs2);
//                $("form input[name='cs3']").val(data.cs3);
//
//				form.on('submit(*)', function(data){
//					console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
//					console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
//					console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
//					$.ajax({
//						type:'post'
//						,url:'../csb/addCsb'
//						,data:data.field
//						,success:function (d){
//							layer.close(ulayer); //table刷新
//							if(d == 1){
//								layer.msg('您的添加已成功！！！',{icon: 1,time:500}, function(){
//								//do something
//									ktab.reload();
//									//关闭layer.open
//								});
//							}
//						}
//					});
//					return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
//				});
//
//			});

            $('#btnAdd').on('click', function () {
                var alayer = layer.open({
                    type: 1
                    , title: "添加信息" //不显示标题栏
                    , closeBtn: true
                    , area: ['400px', '400px']
                    , shade: 0.8
                    , anim: 1
                    , id: 'LAY_layuipro' //设定一个id，防止重复弹出
                    , btnAlign: 'c'
                    , moveType: 1 //拖拽模式，0或者1
                    , content: $("#auForm")
                    , success: function (layero) {
                        var btn = layero.find('.layui-layer-btn');
                        btn.find('.layui-layer-btn0').attr({
                            href: 'http://www.layui.com/'
                            , target: '_blank'
                        });
                    }
                });
                form.on('submit(tj)', function (data) {
                    console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
                    console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
                    console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
                    $.ajax({
                        type: 'post'
                        , url: '../csb/addCsb'
                        , data: data.field
                        , success: function (d) {
                            //关闭layer.open
                            layer.close(alayer);
                            if (d == 1) {
                                layer.msg('您的添加已成功', {icon: 1, time: 500}, function () {
                                    //table刷新
                                    ktab.reload();
                                });
                            }
                        }
                    });
                    return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                });
            });
			
			// 多删
			$("#btnDelAll").on('click', function(obj){
				var c_num = $("input[type='checkbox']:not(:first):checked").length;
				if(c_num > 0){
					var checkItems = table.checkStatus('testReload').data;
					var s="";
					$.each(checkItems,function (i,item){
						s += item.cs1 +(i == c_num-1 ? '' : ',');
					});
					//delete 数组  提交 
					layer.confirm('真的删除这些么', function(){
						$.ajax({
							type:'delete'
							,url:'../csb/delCsb/'+s
							,success:function (d){
								layer.close();
								if(d){
									layer.msg('您的删除已成功！！！',{icon: 1,time:500}, function(){
										//do something
										ktab.reload();
										//关闭layer.open
										//$("#btnDelAll").html("(0)全部删除");
										//$("#btnDelAll").removeClass();
										//$("#btnDelAll").addClass("layui-btn layui-btn-disabled");
									}); 
										//table刷新
								}
							}
						});
					});
						
				} else{
					alert('请选择要操作的数据！？？？');
				}	
			});
		 	
			table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
				console.log(obj);
				var data = obj.data; //获得当前行数据
				var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
				var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
				 
				if(layEvent === 'detail'){ //查看
				  	//弹出页面列出表当中所有数据
				}else if("edit" === layEvent){
					  
					var ulayer = layer.open({
						type: 1
						,title: '添加信息' //不显示标题栏
						,title: false //不显示标题栏
						,closeBtn: true
						,area: ['400px', '400px']
						,shade: 0.8
						,anim: 5
						,id: 'LAY_layuipro' //设定一个id，防止重复弹出
						,btnAlign: 'c'
						,moveType: 1 //拖拽模式，0或者1
						,content: $("#auForm").html()
						,success: function(layero){
					    	var btn = layero.find('.layui-layer-btn');
					    	btn.find('.layui-layer-btn0').attr({
					        	href: 'http://www.layui.com/'
					        	,target: '_blank'
					        });
					    }
					});
					  
					$("form input[name='cs1']").val(data.cs1);
					$("form input[name='cs2']").val(data.cs2);
					$("form input[name='cs3']").val(data.cs3);
					
					form.on('submit(tj)', function(data){
						console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
						console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
						console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
						$.ajax({
							type:'post'
							,url:'../csb/updCsb'
							,data:data.field
							,success:function (d){
								layer.close(ulayer); //table刷新
								if(d == 1){
									layer.msg('您的修改已成功！！！',{icon: 1,time:500}, function(){
									//do something
										ktab.reload();
										//关闭layer.open
									}); 
								}
							}
						});
						return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
					});
					
				}else if("del" === layEvent){
					
					layer.confirm('真的删除行么', function(index){
						$.ajax({
							type:'DELETE'
							,url:"../csb/delCsb/"+data.cs1+""
							,success:function (d){
								layer.close(ulayer); //table刷新
								if(d == 1){
									layer.msg('您的删除已成功！！！',{icon: 1,time:500}, function(){
									//do something
										ktab.reload();
										//关闭layer.open
									}); 
								}
							}
						});
						return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
					 });
					  
				}
			});
			
			
		});
		
	</script>
</body>
</html>